Step 2 - Show the bloom effect

In this step you first apply the bloom effect to the headlights of the car. Then you show the bloom effect by blending it on top of the normally rendered scene.

In the next step you fine-tune the effect by applying it three more times.

Apply the bloom

To apply the bloom:

1. In the Library right-click Materials and Textures, select Load Material Type From Disk, go to <KanziWorkspace>/Tutorials/Bloom/Assets, and load the GaussianBloom07.kzmat material type.
   Kanzi Studio adds the GaussianBloom07 material type and creates the GaussianBloom07Material material which provides a directional Gaussian blur effect using a kernel size of 7 pixels.
   You use this material to create the bloom effect.
   
2. Apply the first pass of the bloom effect:
   1. In the Library > Rendering > Render Passes > Bloom > Render Bloom create a Blit Render Pass, name it Blit Horizontal Bloom, and in the Properties add and set:
      • Texture0 to Bloom Threshold
      • Material to GaussianBloom07Material
      • Blur Direction X property field to 1
        This way you apply the blur effect in the horizontal direction.
      • Blur Radius to 2
        This way you set the strength of the blur effect.
      • Intensity to 1,5
        This way you set the intensity of the bloom effect.
      You use this render pass to draw the Bloom Threshold render pass using the GaussianBloom07Material material to apply to the car node the bloom effect with Gaussian blur in the horizontal direction.
      
      
   2. In the Library in the Render Bloom render pass create a Composition Target Render Pass, name it Horizontal Bloom 1, and drag the Blit Horizontal Bloom to the Horizontal Bloom 1 render pass.
      You use the Horizontal Bloom 1 render pass to render the Blit Horizontal Bloom render pass to a composition target. Later in this section you use the composition target as input to a render pass which applies the bloom effect with Gaussian blur in the vertical direction.
      
   3. In the Library select the Horizontal Bloom 1 render pass, in the Properties add the Resolution Divisor property, and set it to 2.
      This way you divide by 2 the resolution of the composition target to which the render pass renders itself.
      You reduce the resolution of the composition target to improve performance.
      
   4. In the Library duplicate the Horizontal Bloom 1 render pass and rename the new render pass to Vertical Bloom 1.
      You use this render pass to apply the blur in the vertical direction.
      
   5. In the Library select the Vertical Bloom 1 > Blit Horizontal Bloom render pass and in the Properties set:
      • Name to Blit Vertical Bloom
      • Texture0 to Horizontal Bloom 1
      • Blur Direction X property field to 0
      • Blur Direction Y property field to 0,5
        This way you apply the blur effect in the vertical direction.
        You use the value 0,5 because you divided the resolution of the Horizontal Bloom 1 render pass by 2. This way you create a symmetrical blur effect.
      You use this render pass to draw the Horizontal Bloom 1 render pass using the GaussianBloom07Material material to apply to the car node the bloom effect with Gaussian blur in the vertical direction.
      
3. Add the material that you use to combine several passes of the bloom effect:
   1. In the Library right-click Materials and Textures, select Load Material Type From Disk, go to <KanziWorkspace>/Tutorials/Bloom/Assets, and load the Combine.kzmat material type.
      Kanzi Studio adds the Combine material type and creates the CombineMaterial material which supports rendering four textures and defining a multiplication factor for each of them.
      
   2. In the Library > Materials and Textures > Materials select CombineMaterial and in the Properties set the Texture0, Texture1, Texture2, and Texture3 properties to < No Texture >.
      
4. In the Library > Rendering > Render Passes > Bloom > Render Bloom create a Blit Render Pass, name it Blit Combined Bloom, and in the Properties set:
   • Texture0 to Vertical Bloom 1
   • Material to CombineMaterial
   You use this render pass to draw the Vertical Bloom 1 render pass to the screen using the CombineMaterial.
   In the next step of this tutorial you apply the bloom effect three more times and use this render pass to combine the outputs of all four passes.
   
   

Show the car with the headlights turned on

In this section you create the render passes and material you need to show the car with the headlights turned on.

To show the car with the headlights turned on:

1. Create a material which supports blending the bloom effect with the normally rendered scene:
   1. In the Library right-click Materials and Textures, select Load Material Type From Disk, go to <KanziWorkspace>/Tutorials/Bloom/Assets, and load the BlitBloom.kzmat material type.
      Kanzi Studio adds the BlitBloom material type and creates the BlitBloomMaterial material which supports blending the bloom effect with the normally rendered scene and setting the color of the bloom effect.
      
   2. In the Library > Materials and Textures > Materials select the BlitBloomMaterial and in the Properties set the Blend Mode to Additive.
      You set the Blend Mode to Additive because to show the bloom effect you want to add its pixel values to those of the normally rendered scene.
      
2. Show the scene with the bloom effect:
   1. In the Library > Rendering > Render Passes > Bloom > Render Bloom create a Composition Target Render Pass, name it Bloom Out, and drag the Blit Combined Bloom render pass to the Bloom Out render pass.
      
   2. In the Library in the Bloom render pass create a Blit Render Pass, name it Show Bloom, and in the Properties add and set:
      • Texture0 to Bloom Out
      • Material to BlitBloomMaterial
      • Post-processing Color Multiply Lightness (L) property field to 220
        This way you set the brightness of the bloom effect.
      You use this render pass to draw the Bloom Out render pass using the BlitBloomMaterial material to show the bloom effect.
      
      

See also

To learn more about the render passes in Kanzi, see Rendering.

To learn more about materials and material types, see Material types and materials.

Open topic with navigation